<template>
  <nav class="navbar navbar-default" :style="navStyle">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img class="Brand" alt="Brand" src="../../../assets/img/mobapi-logo.png"></a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!-- navbar-left -->
        <ul class="nav navbar-nav">
          <li><a href="#">{{t('solution')}}</a></li>
          <li><a href="#">{{t('technology')}}</a></li>
          <li><a href="#">{{t('project')}}</a></li>
          <li><a href="#">{{t('blog')}}</a></li>
        </ul>
        <!-- navbar-right -->
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a-input type="color" class="color-picker" v-model:value="colorValue" @change="handleChangeColor"></a-input>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">{{ t('language') }}<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <!-- Use Global Variable -->
              <!-- Options API -->
              <!-- $i18n.locale -->
              <li><a @click="handleChangeLocale('en')">English</a></li>
              <li><a @click="handleChangeLocale('zh')">简体中文</a></li>
              <li><a @click="handleChangeLocale('ja')">日本語</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</template>

<script lang="ts">
  /** lib **/
  import {
    useI18n
  } from 'vue-i18n'
  /** logic **/
  import useNavStretch from './nav-stretch'
  import useColorPicker from './color-picker'

  export default {
    // option API
    methods: {
      handleChangeLocale(t: any) {
        this.$i18n.locale = t
      }
    },
    // composition API
    setup() {
      return {
        ...useColorPicker(),
        ...useNavStretch(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "language": "语言",
  "solution": "解决方案",
  "technology": "科学技术",
  "project": "项目",
  "blog": "博客"
  },
  "en": {
  "language": "Language",
  "solution": "SOLUTION",
  "technology": "TECHNOLOGY",
  "project": "PROJECT",
  "blog": "BLOG"
  },
  "ja": {
  "language": "言語",
  "solution": "ソリューション",
  "technology": "テクノロジー",
  "project": "プロジェクト",
  "blog": "ブログ"
  }
  }
</i18n>

<style scoped>
  .navbar {
    min-height: 60px;
    /* background-color: rgb(80, 70, 87); */
    margin-bottom: 0px;
    /* -moz-box-shadow: 0px 1px 10px #333333;
    -webkit-box-shadow: 0px 1px 10px #333333;
    box-shadow: 0px 1px 10px #333333; */
  }

  /** transparent **/
  .nav-container {
    position: absolute;
    z-index: 999;
    width: 100%;
    text-align: center;
  }

  /** transparent **/

  .navbar-default {
    border: 0;
    /** transparent **/
    width: 60%;
    background-color: transparent;
    transform: translateX(20vw);
    /** transparent **/
  }

  @media screen and (max-width: 1400px) {
    .navbar-default {
      border: 0;
      width: 80%;
      background-color: transparent;
      transform: translateX(10vw);
    }
  }

  @media screen and (max-width: 1044px) {
    .navbar-default {
      border: 0;
      width: 100%;
      background-color: transparent;
      transform: translateX(0);
    }
  }

  @media screen and (max-width: 768px) {
    .navbar {
      position: fixed;
    }

    .navbar-default {
      border: 0;
      width: 100%;
      background-color: transparent;
      transform: translateX(0);
    }
  }

  .navbar-nav {
    margin: 0px -15px;
  }

  .navbar-header {
    min-height: 60px;
  }

  .navbar-default .navbar-toggle {
    margin-top: 13px;
    border-color: #ddd0;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background-color: white;
  }

  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: #ddd0;
  }

  .navbar-collapse {
    border: 0;
    border-color: rgb(80, 70, 87);
  }

  .Brand {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 10px;
    max-height: 40px;
    position: relative;
    bottom: 16px;
  }

  .color-picker {
    width: 30px;
    height: 30px;
    background-color: transparent;
    padding: 0;
    transform: translateY(15px);
    border: none;
  }

  .navbar .nav>li>a {
    font-family: OpenSans-Semibold;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    /* margin-top: 5px; */
    margin-left: 18px;
    margin-right: 18px;
    color: white;
    transform: translateY(5px);
  }

  .nav .navbar-nav .navbar-right>li>a {
    font-family: OpenSans-Semibold;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    /* margin-top: 5px; */
    margin-left: 25px;
    margin-right: 25px;
    color: white;
    transform: translateY(5px);
  }

  .dropdown-menu {
    background: rgb(44, 62, 80);
  }

  .dropdown-menu>li>a {
    font-family: OpenSans-Semibold;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    /* margin-top: 5px; */
    /* margin-left: 25px; */
    /* margin-right: 25px; */
    color: white;
  }

  .dropdown-menu>li>a:hover {
    font-family: OpenSans-Semibold;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    /* margin-top: 5px; */
    /* margin-left: 25px; */
    /* margin-right: 25px; */
    color: #1FCC6E;
    background: white;
  }

  .navbar .nav>li>a:visited {
    color: white;
    /* background-color: #0000ff; */
  }

  .navbar .nav>li>a:hover {
    transition: .5s ease-in;
    color: #1FCC6E;
  }
</style>